// hooks 封装逻辑，提供响应式数据。
import { useIntersectionObserver, useMouseInElement } from "@vueuse/core";
import { ref } from "vue";
// 数据懒加载函数
export const useLazyData = (apiFn) => {
  // 需要
  // 1. 被观察的对象
  // 2. 不同的API函数
  const target = ref(null);
  const result = ref([]);
  const { stop } = useIntersectionObserver(
    target,
    async ([{ isIntersecting }], observerElement) => {
      if (isIntersecting) {
        stop();
        // 调用API获取数据
        // apiFn().then((data) => {
        //   result.value = data.result;
        // });
        const res = await apiFn();
        result.value = res.result;
      }
    }, // 配置选项，相交的比例大于0就触发
    {
      threshold: 0,
    }
  );
  // 返回--->数据（dom,后台数据）
  return { target, result };
};

// 获取数据在目标元素的x，y，鼠标是否在元素中
export const mouseInElement = () => {
  const target = ref(null);

  const { elementX, elementY, isOutside } = useMouseInElement(target);

  return { elementX, elementY, isOutside, target };
};
